<template>
  <div class="table_root" ref="table_root" :style="{ height: tableHeight + 'px' }">
    <ux-grid ref="singleTable" v-if="reLoadFlg" :data="prposTabelData" style="width: 100%" border :header-cell-style="{
      color: 'rgba(0, 0, 0, 0.85)',
      fontSize: '14px',
      textAlign: 'left',
      fontWeight: 'bold',
      padding: 0,
      height: '32px',
    }" :cell-style="{
      color: 'rgba(96,98,102,1)',
      fontSize: '14px',
      textAlign: 'left',
      padding: 0,
      height: '32px',
    }" :row-style="{
      color: 'rgba(96,98,102,1)',
      fontSize: '13px',
      textAlign: 'left',
      padding: 0,
      height: '32px',
    }" @current-change="handleCurrentChange" highlight-current-row :height="tableHeight" v-loading="loading"
      element-loading-spinner="el-icon-loading" element-loading-background="#f8f8f8"
      :element-loading-text="$t('message.bhView.loading')">
      <template slot="empty"> {{ empty }} </template>
      <ux-table-column property="macNumb" :title="ConfigObject.macNumb.title"
        v-if="JSON.parse(ConfigObject.macNumb.isShow)" :width="ConfigObject.macNumb.width"
        :fixed="JSON.parse(ConfigObject.macNumb.isFlex) ? 'left' : ''" :resizable="false">
        <template slot="header" slot-scope="scope">
          <div class="tabel-header-view">
            <!-- <span>{{ConfigObject.macNumb.title}}：</span> -->
            <el-select value="" size="mini" filterable clearable :placeholder="ConfigObject.macNumb.title"
              @change="changeTableTitleSearch($event, 0)">
              <el-option v-for="item in tableSearchData.macNumbList" :key="item.key" :label="item.label"
                :value="item.key">
              </el-option>
            </el-select>
          </div>
        </template>
        <template slot-scope="scope">
          <p class="hideTextView" :title="scope.row.macNumb">
            {{ scope.row.macNumb }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column property="macName" :title="ConfigObject.macName.title" v-if="ConfigObject.macName.isShow"
        :width="ConfigObject.macName.width" :fixed="JSON.parse(ConfigObject.macName.isFlex) ? 'left' : ''"
        :resizable="false">
        <template slot-scope="scope">
          <p class="hideTextView" :title="scope.row.macName">
            {{ scope.row.macName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column property="ctgName" :title="ConfigObject.ctgName.title" v-if="ConfigObject.ctgName.isShow"
        :width="ConfigObject.ctgName.width" :fixed="JSON.parse(ConfigObject.ctgName.isFlex) ? 'left' : ''"
        :resizable="false">
        <template slot="header" slot-scope="scope">
          <div class="tabel-header-view">
            <!-- <span>{{$t('message.reading.table.column1')}}：</span> -->
            <el-select value="" size="mini" filterable :placeholder="ConfigObject.ctgName.title" multiple collapse-tags
              clearable @change="changeTableTitleSearch($event, 1)">
              <el-option v-for="item in tableSearchData.macTypeList" :key="item.key" :label="item.label"
                :value="item.key">
              </el-option>
            </el-select>
          </div>
        </template>
        <template slot-scope="scope">
          <p class="hideTextView" :title="scope.row.ctgName">
            {{ scope.row.ctgName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column property="clName" :title="ConfigObject.clName.title" v-if="ConfigObject.clName.isShow"
        :width="ConfigObject.clName.width" :fixed="JSON.parse(ConfigObject.clName.isFlex) ? 'left' : ''"
        :resizable="false">
        <template slot-scope="scope">
          <p class="hideTextView" :title="scope.row.clName">
            {{ scope.row.clName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column property="macFrom" :title="ConfigObject.macFrom.title" v-if="ConfigObject.macFrom.isShow"
        :width="ConfigObject.macFrom.width" :fixed="JSON.parse(ConfigObject.macFrom.isFlex) ? 'left' : ''"
        :resizable="false">
        <template slot-scope="scope">
          <p class="hideTextView" :title="scope.row.macFrom">
            {{ scope.row.macFrom }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column property="macTo" :title="ConfigObject.macTo.title" v-if="ConfigObject.macTo.isShow"
        :width="ConfigObject.macTo.width" :fixed="JSON.parse(ConfigObject.macTo.isFlex) ? 'left' : ''"
        :resizable="false">
        <template slot-scope="scope">
          <p class="hideTextView" :title="scope.row.macTo">
            {{ scope.row.macTo }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column property="lawName" :title="ConfigObject.lawName.title" v-if="ConfigObject.lawName.isShow"
        :width="ConfigObject.lawName.width" :fixed="JSON.parse(ConfigObject.lawName.isFlex) ? 'left' : ''"
        :resizable="false">
        <template slot="header" slot-scope="scope">
          <div class="tabel-header-view">
            <!-- <span>{{$t('message.reading.table.column1')}}：</span> -->
            <el-select value="" size="mini" filterable clearable :placeholder="ConfigObject.lawName.title"
              @change="changeTableTitleSearch($event, 2)">
              <el-option v-for="item in tableSearchData.lawList" :key="item.key" :label="item.label" :value="item.key">
              </el-option>
            </el-select>
          </div>
        </template>
        <template slot-scope="scope">
          <p class="hideTextView" :title="scope.row.lawName">
            {{ scope.row.lawName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column property="makDate" :title="ConfigObject.makDate.title" v-if="ConfigObject.makDate.isShow"
        :width="ConfigObject.makDate.width" :fixed="JSON.parse(ConfigObject.makDate.isFlex) ? 'left' : ''"
        :resizable="false">
        <template slot-scope="scope">
          <p class="hideTextView" :title="scope.row.makDate">
            {{ scope.row.makDate }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column property="mkrName" :title="ConfigObject.mkrName.title" v-if="ConfigObject.mkrName.isShow"
        :width="ConfigObject.mkrName.width" :fixed="JSON.parse(ConfigObject.mkrName.isFlex) ? 'left' : ''"
        :resizable="false">
        <template slot-scope="scope">
          <p class="hideTextView" :title="scope.row.mkrName">
            {{ scope.row.mkrName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column property="impName" :title="ConfigObject.impName.title" v-if="ConfigObject.impName.isShow"
        :width="ConfigObject.impName.width" :fixed="JSON.parse(ConfigObject.impName.isFlex) ? 'left' : ''"
        :resizable="false">
        <template slot-scope="scope">
          <p class="hideTextView" :title="scope.row.impName">
            {{ scope.row.impName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column property="stName" :title="ConfigObject.stName.title" v-if="ConfigObject.stName.isShow"
        :width="ConfigObject.stName.width" :fixed="JSON.parse(ConfigObject.stName.isFlex) ? 'left' : ''"
        :resizable="false">
        <template slot-scope="scope">
          <p class="hideTextView" :title="scope.row.stName">
            {{ scope.row.stName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column property="fncName" :title="ConfigObject.fncName.title" v-if="ConfigObject.fncName.isShow"
        :width="ConfigObject.fncName.width" :fixed="JSON.parse(ConfigObject.fncName.isFlex) ? 'left' : ''"
        :resizable="false">
        <template slot-scope="scope">
          <p class="hideTextView" :title="scope.row.fncName">
            {{ scope.row.fncName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column property="flwClsName" :title="ConfigObject.flwClsName.title"
        v-if="ConfigObject.flwClsName.isShow" :width="ConfigObject.flwClsName.width"
        :fixed="JSON.parse(ConfigObject.flwClsName.isFlex) ? 'left' : ''" :resizable="false">
        <template slot-scope="scope">
          <p class="hideTextView" :title="scope.row.flwClsName">
            {{ scope.row.flwClsName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column property="flwName" :title="ConfigObject.flwName.title" v-if="ConfigObject.flwName.isShow"
        :width="ConfigObject.flwName.width" :fixed="JSON.parse(ConfigObject.flwName.isFlex) ? 'left' : ''"
        :resizable="false">
        <template slot-scope="scope">
          <p class="hideTextView" :title="scope.row.flwName">
            {{ scope.row.flwName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column property="useCase" :title="ConfigObject.useCase.title" v-if="ConfigObject.useCase.isShow"
        :width="ConfigObject.useCase.width" :fixed="JSON.parse(ConfigObject.useCase.isFlex) ? 'left' : ''"
        :resizable="false">
        <template slot-scope="scope">
          <p class="hideTextView" :title="scope.row.useCase">
            {{ scope.row.useCase }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column property="cr" :title="ConfigObject.cr.title" v-if="ConfigObject.cr.isShow"
        :width="ConfigObject.cr.width" :fixed="JSON.parse(ConfigObject.cr.isFlex) ? 'left' : ''" :resizable="false">
        <template slot-scope="scope">
          <p class="hideTextView" :title="scope.row.cr" :style="'background:' + scope.row.crColor">
            {{ scope.row.cr }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column property="rl" :title="ConfigObject.rl.title" v-if="ConfigObject.rl.isShow"
        :width="ConfigObject.rl.width" :fixed="JSON.parse(ConfigObject.rl.isFlex) ? 'left' : ''" :resizable="false">
        <template slot-scope="scope">
          <p class="hideTextView" :title="scope.row.rl" :style="'background:' + scope.row.rlColor">
            {{ scope.row.rl }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column property="rt" :title="ConfigObject.rt.title" v-if="ConfigObject.rt.isShow"
        :width="ConfigObject.rt.width" :fixed="JSON.parse(ConfigObject.rt.isFlex) ? 'left' : ''" :resizable="false">
        <template slot-scope="scope">
          <p class="hideTextView" :title="scope.row.rt" :style="'background:' + scope.row.rtColor">
            {{ scope.row.rt }}
          </p>
        </template>
      </ux-table-column>
    </ux-grid>

    <vue-context-menu class="right-menu" :show="contextMenuVisible" :target="contextMenuTarget"
      @update:show="updateContextMenuShow" v-if="domInitFlag">
      <div v-for="(item, index) in contextMenuData" :key="index">
        <a @click="onContextMenuClick(item)" :disabled="!item.validable"
          :style="item.validable ? 'color:#000000' : 'color:lightgray'">{{ item.menuText }}</a>
        <div v-if="item.underLine" class="menu-cutoff"></div>
      </div>
    </vue-context-menu>
  </div>
</template>

<script>
import { component as VueContextMenu } from "@xunlei/vue-context-menu";
import { showLoading, hideLoading } from "@/utils/loading";
// import $ from 'jquery'
// 导出模块
export default {
  // 模块名字
  name: "ReadingTabel",
  props: {
    tableHeight: Number,
    prposTabelData: Array,
    loading: Boolean,
    category: Array,
    statute: Array,
    ConfigObject: Object,
    tableSearchData: Object,
    empty: String,
  },
  // 模块数据
  data() {
    //数据
    return {
      tempDataJson: {
        macType: '',
        macType1: [],
        lawValue: '',
        macNumbValue: '',
      },
      DateList: [],
      // showDoActionAfterChange: true,
      selectRowData: null,

      contextMenuTarget: {},
      // contextMenuTarget:document.body,
      contextMenuVisible: false,
      contextMenuData: [
        {
          menuText: this.$t("message.reading.cadView.contextMenu.menu0"),
          underLine: false,
          tag: "base-style",
          validable: false,
        },
        {
          menuText: this.$t("message.reading.cadView.contextMenu.menu1"),
          underLine: false,
          tag: "part-style",
          validable: false,
        },
        {
          menuText: this.$t("message.reading.cadView.contextMenu.menu2"),
          underLine: true,
          tag: "draw-style",
          validable: true,
        },
        {
          menuText: this.$t("message.reading.cadView.contextMenu.menu3"),
          underLine: true,
          tag: "plan",
          validable: false,
        },
        {
          menuText: this.$t("message.reading.cadView.contextMenu.menu4"),
          underLine: false,
          tag: "check-result",
          validable: true,
        },
        {
          menuText: this.$t("message.reading.cadView.contextMenu.menu5"),
          underLine: false,
          tag: "bh-reading",
          validable: true,
        },
        {
          menuText: this.$t("message.reading.cadView.contextMenu.menu6"),
          underLine: true,
          tag: "check-reading",
          validable: false,
        },
        {
          menuText: this.$t("message.reading.cadView.contextMenu.menu7"),
          underLine: false,
          tag: "fit-draw",
          validable: true,
        },
      ],
      lawValue: "",
      macNumbValue: "",
      macTypeList: [],
      macType: [],
      domInitFlag: false,
      reLoadFlg: true,
    };
  },
  // 注册组件
  components: {
    "vue-context-menu": VueContextMenu,
  },
  // 监听指定值，只有指定值变化，才会触发
  watch: {
    prposTabelData(nData) {
      showLoading();
      this.reLoadFlg = false;
      this.DateList = [];
      //  this.$nextTick(function(){
      //     $('.elx-table--empty-content').html('No data')
      //   })
      if (nData.length != 0) {
        this.DateList = nData[0].dataJson;
        // console.log(nData)
        this.$nextTick(() => {
          let _this = this;
          setTimeout(function () {
            // 表格重载、解决刷新数据表格样式高度变乱的问题
            _this.$refs.singleTable.doLayout(true);
            _this.$refs.singleTable.pagingScrollTopLeft(0, 0);
          });

          this.setCurrentByNameAndNumb(
            this.$store.state.macName,
            this.$store.state.macNameb
          );
        });
      } else {
        this.empty = "No Data";
      }
      setTimeout(() => {
        hideLoading();
        this.reLoadFlg = true;

        this.$refs.singleTable.refreshColumn();
        this.$refs.singleTable.doLayout();
      }, 500);
    },
  },
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    setCurrentByIndex(inIndex) {
      let _this = this;
      setTimeout(function () {
        _this.$refs.singleTable.pagingScrollTopLeft(inIndex * 32);
        _this.$refs.singleTable.setCurrentRow(_this.prposTabelData[inIndex]);
      }, 100);
    },

    setCurrentByNameAndNumb(inMacName, inMacNumb) {
      for (var i = 0; i < this.prposTabelData.length; i++) {
        if (
          this.prposTabelData[i].macName == inMacName &&
          this.prposTabelData[i].macNumb == inMacNumb
        ) {
          // this.$refs.singleTable.bodyWrapper.scrollTop = i * 32
          //bodyWrapper是拆分组件后的table容器
          // let bodyWrapper = this.$refs.singleTable.bodyWrapper;
          // // e为行号
          // if (bodyWrapper.children[0].rows[i]) {
          //   bodyWrapper.scrollTop = bodyWrapper.children[0].rows[i].offsetTop;
          // }

          let _this = this;
          setTimeout(function () {
            _this.$refs.singleTable.pagingScrollTopLeft(i * 32);
            _this.$refs.singleTable.setCurrentRow(_this.prposTabelData[i]);
          }, 100);
          break;
        }
      }
    },

    handleCurrentChange(val) {
      this.selectRowData = val;
      this.$emit("getReadTabelRow", val);
      console.log(val);
    },
    clickROW(row) {
      console.log(row);
    },
    load() { },
    show() { },

    updateContextMenuShow(inShow) {
      console.log("updateShow(inShow)" + inShow);
      this.contextMenuVisible = inShow;
      if (this.selectRowData != null) this.contextMenuVisible = inShow;
      else this.contextMenuVisible = false;
    },

    onContextMenuClick(e) {
      this.contextMenuVisible = false;
      this.$emit("onContextMenuClick", e);
    },

    getSelectRowData() {
      return this.selectRowData;
    },
    //触发表格筛选
    changeTableTitleSearch(e, i) {
      console.log(e, i);
      if (i == 0) {
        this.tempDataJson.macNumbValue = e;
      }
      if (i == 1) {
        this.tempDataJson.macType1 = [...this.tempDataJson.macType1, ...e];
      }
      if (i == 2) {
        this.tempDataJson.lawValue = e;
      }
      this.tempDataJson.macType = this.tempDataJson.macType1.includes(this.tableSearchData.macTypeList[0].key) ? '' : this.tempDataJson.macType1.join(',');

      // this.tempDataJson = {
      //   macType: this.macType?.toString(),
      //   lawValue: this.lawValue,
      //   macNumbValue: this.macNumbValue,
      // };
      // let dataJson = {
      //   macType: this.macType?.toString(),
      //   lawValue: this.lawValue,
      //   macNumbValue: this.macNumbValue,
      // };
      this.$emit("SearchReadTable", this.tempDataJson);
    },
  },
  // 创建前状态(里面是操作)
  beforeCreate() { },
  // 创建完毕状态(里面是操作)
  created() { },
  // 挂载前状态(里面是操作)
  beforeMount() { },
  // 挂载结束状态(里面是操作)
  mounted() {
    var _self = this;
    this.$nextTick(function () {
      _self.contextMenuTarget = _self.$refs.table_root;
      _self.domInitFlag = true;
    });
    console.log(this.ConfigObject, "ConfigObject");
  },
  // 更新前状态(里面是操作)
  beforeUpdate() { },
  // 更新完成状态(里面是操作)
  updated() { },
  // 销毁前状态(里面是操作)
  beforeDestroy() { },
  // 销毁完成状态(里面是操作)
  destroyed() { },
};
</script>
<style lang="scss" scoped>
.table_root {
  height: 100%;
}

.right-text {
  width: 100%;
  height: 100%;
  // text-align: right;
}

.dateMessage {
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 224);
}

.hideTextView {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

::v-deep .el-table .cell {
  line-height: 32px;
}

.right-menu {
  position: fixed;
  background: #fff;
  border: solid 1px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  background-color: lightgray;
  z-index: 999;
  display: none;

  padding-left: 20px;
}

.right-menu a {
  width: 125px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  display: block;
  color: #1a1a1a;
  background-color: #fff;
}

.right-menu a:hover {
  background: #eee;
  color: #fff;
}

html,
body {
  height: 100%;
}

.right-menu {
  border: 1px solid #eee;
  box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, 0.1);
  border-radius: 1px;
}

a {
  text-decoration: none;
}

.right-menu a {
  padding: 2px;
}

.right-menu a:hover {
  background-color: rgb(176, 157, 247);
}

.menu-cutoff {
  width: 100%;
  height: 1px;
  background-color: lightgray;
}

.tabel-header-view {
  // width: 100%;
  // height: 32px;
  // display: flex;
  // justify-content: flex-start;
  // align-items: center;

  ::v-deep .el-input__inner,
  ::v-deep .el-input {
    border: 0 none;
    width: 100%;
    height: 24px;
    background: transparent;
    padding-left: 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
  }

  ::v-deep .el-input {
    width: 100%;
    display: flex;
    align-items: center;
  }

  ::v-deep .el-input--mini .el-input__inner {
    line-height: 24px;
  }

  ::v-deep input::-webkit-input-placeholder {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
  }

  ::v-deep .el-input__suffix {
    line-height: 24px;
  }

  ::v-deep .el-input--mini .el-input__icon {
    line-height: 24px;
  }

  ::v-deep .el-select__tags {
    max-width: 100%;
  }
}

// ::v-deep .elx-table .elx-body--row.row--checked,
// ::v-deep .elx-table .elx-body--row.row--current,
// ::v-deep .elx-table .elx-body--row.row--radio {
//   background: rgb(233, 236, 237);
// }

::v-deep .elx-table.border--full .elx-table--fixed-left-wrapper {
  border: 0 none;
}

::v-deep .elx-table .elx-table--fixed-left-wrapper.scrolling--middle {
  box-shadow: none;
}
</style>
